<!DOCTYPE html>
<html>
  <head>
    <title>Life Planner by Team Awesome</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
    <link href="/static/life_planner.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/life_planner.js"></script>
  </head>
  <body>
    <h1>The Life Planner!</h1>
    <h2>the best life planner ever. for serious.</h2>
    <div id="white_block"> 
    </div>
    <div id="invisible_space">
    </div>
    <div id="lights_logo">
      <img src="/static/light_green_small.png"> <img src="/static/light_blue_small.png"> <img src="/static/light_purple_small.png">
    </div>
    <ul class="message_bar">
      <a href="/"><li>Home</li></a>
      <a href="/instructions"><li>Instructions</li></a>
      <a href="/life_planner"><li id="active_button">Life Planner</li></a>
      <li id="new_post">New Post
        <ul class="message_dropdown">
          <li>
            <form action="/life_planner" method="post" id="post_form">
              <textarea name="content" type="input/text" col='40' rows='5' ></textarea>
              <p>
                <label><input type="checkbox" name="cal_tag" />Add to To Do List</label>
              </p>
                <label><input type="checkbox" name="AM" />AM</label>
                <label><input type="checkbox" name="PM" />PM</label>
              <p>
                <label><input type="checkbox" name="mon_tag" />Add to Budget</label>
              </p>
              <p>
                <label><input type="checkbox" name="fla_tag" />Add to Flash Cards</label>
              </p>
              <input type="submit" name="submit" />
            </form>
          </li>
        </ul>
      </li>
      <a href="/favSite"><li>FavSite</li></a>
      <a href="/settings"><li>Settings</li></a>
      <a href='/contact'><li>Contact Us</li></a>
    </ul>
    <div class="content">
      <table>
        <tr>
          <td id="calendar">
            <div id="calendar_container">
              <h3><img src="/static/light_green_small.png" />To Do List for Today</h3>
              <div id="actually_calendar">
                <table id="todotable"> <!-- This is the Calendar-->
                  <form action="/life_planner" method="post"> 
                    {% if calendarsAM %} 
                      {% for calendar in calendarsAM %}
                        <tr>
                          <td id="cal_text"> 
                            {{ calendar.hours }}:{{ calendar.minutes }}AM -- {{ calendar.events }} 
                          </td>
                          <td id="deleteButton">
                            <input type="image" src="/static/redx.png" name="check" value="{{ calendar.key }}" alt="Check off this post!" />
                          </td>
                       </tr>
                     {% endfor %}
                    {% else %}
                      No items to do this AM!
                    {% endif %}

                    {% if calendarsPM %} 
                      {% for calendar in calendarsPM %}
                        <tr>
                          <td id="cal_text"> 
                            {{ calendar.hours }}:{{ calendar.minutes }}PM -- {{ calendar.events }} 
                          </td>
                          <td id="deleteButton">
                            <input type="image" src="/static/redx.png" name="check" value="{{ calendar.key }}" alt="Check off this post!" />
                          </td>
                       </tr>
                      {% endfor %}
                    {% else %}
                      No items to do this PM!
                    {% endif %}

                      {% if calendars %} 
                      {% for calendar in calendars %}
                        <tr>
                          <td id="cal_text"> 
                            {{ calendar.hours }}:{{ calendar.minutes }} -- {{ calendar.events }} 
                          </td>
                          <td id="deleteButton">
                            <input type="image" src="/static/redx.png" name="check" value="{{ calendar.key }}" alt="Check off this post!" />
                          </td>
                       </tr>
                     {% endfor %}
                    {% else %}
                      No items to do at a time lacking AM or PM!
                    {% endif %}
                   
                  </form>
                </table>
              </div>
            </div>
          </td>
          <td>
            <div id="flash_cards_and_budget">
              <div id="flashcard_container">
                <h3><img src="/static/light_purple_small.png" /> The Flash...Cards!</h3>
                <div id="flash_cards">
                  Question: {{ rk }}
                  <ul>
                    <li>Show the Answer!
                      <ul id="Answer"><p>{{ answer }}</p>
                      </ul>
                    </li>
                  </ul>
                  <form action='/life_planner'>
                    <input type="submit" name="newquestion" value="New Question" />
                  </form>
                </div>
              </div>
              <p></p>
              <div id="budget"> 
                <h3><img src="/static/light_blue_small.png" /> Budget</h3>
                <div id="inside_budget">
                <p>Savings: 
                  {% if savings %}
                    ${{ savings }}
                  {% else %}
                    <a href="/settings">Set up your budget</a>
                  {% endif %}</p>
                Income:
                  <ul>
                    <li>Monthly Income: 
                      {% if monthly_income %}
                        ${{ monthly_income }}
                      {% else %}
                        <a href="/settings">Set up your budget</a>
                      {% endif %}
                    </li>
                    <li>Additional Income: ${{ income }}</li>
                  </ul>
                Expenses:
                  <ul>
                    <li>Monthly Expenses:
                      {% if monthly_expenses %}
                        ${{ monthly_expenses }}
                      {% else %}
                        <a href="/settings">Set up your budget</a>
                      {% endif %}
                    </li>
                    <li>Additional Expenses: ${{ expenses }} </li>
                  </ul>
                <p>Net Money: ${{ total_money }}</p>
                
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
